<template>
    <div class="registerBody">
      <div class="registerDiv">
        <div class="register-content">
          <h1 class="register-title">Reset Password based on Phone</h1>
          <el-form :model="registerForm" label-width="140px" :rules="rules" ref="registerForm">
            <!-- <el-form-item label="role" prop="roleId">
                <el-select style="width: 200px" v-model="registerForm.roleId" placeholder="请选择">
                  <el-option label="Tutor" value="1"></el-option>
                  <el-option label="Student" value="2"></el-option>
                </el-select>
              </el-form-item> -->
            <!-- <el-form-item label="Account" prop="no">
              <el-input style="width: 200px" type="text" v-model="registerForm.no" autocomplete="off" size="small"></el-input>
            </el-form-item> -->
            <el-form-item label="name" prop="name">
              <el-input style="width: 200px" type="text" v-model="registerForm.name" autocomplete="off" size="small"></el-input>
            </el-form-item>
            <!-- <el-form-item label="age" prop="age">
              <el-input style="width: 200px" type="number" v-model="registerForm.age" autocomplete="off" size="small"></el-input>
            </el-form-item> -->
            <el-form-item label="phone" prop="phone">
              <el-input style="width: 200px" type="text" v-model="registerForm.phone" autocomplete="off" size="small"></el-input>
            </el-form-item>
            <el-form-item label="new password:" prop="password">
              <el-input style="width: 200px" type="password" v-model="registerForm.password" show-password autocomplete="off" size="small"></el-input>
            </el-form-item>
            <!-- <el-form-item label="phone" prop="phone">
              <el-input style="width: 200px" type="text" v-model="registerForm.phone" autocomplete="off" size="small"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="sex" prop="sex">
              <el-select style="width: 200px" v-model="registerForm.sex" placeholder="Please select">
                <el-option label="Male" value="1"></el-option>
                <el-option label="Female" value="2"></el-option>
              </el-select>
            </el-form-item> -->
            <div class="button-container">
            <el-form-item>
              <el-button type="primary" @click="register" :disabled="register_disabled">Reset</el-button>
            </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "Register",
    data() {
      return {
        register_disabled: false,
        registerForm: {
            name:'',
            password:'',
            phone:'',
            
        },
        rules: {
        
        name: [
          { required: true, message: 'Please enter your name', trigger: 'blur' },
        ],
        password: [
          { required: true, message: 'Please input a password', trigger: 'blur' },
          { min: 3, max: 8, message: 'Length between 3 and 8 characters', trigger: 'blur' }
        ],
        
        phone: [
          { required: true, message: 'The phone number cannot be empty', trigger: 'blur' },
          { pattern:/^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: 'Please enter the correct phone number', trigger: 'blur' }
        ],
        }
      };
    },
    methods: {
      register() {
        this.register_disabled = true;
        this.$refs.registerForm.validate((valid) => {
          if (valid) {
            this.$axios.put(this.$httpUrl + '/user/reset', this.registerForm).then(res => res.data).then(res => {
              console.log(res);
              if (res.code == 200) {
                alert('successfully reseted！');
                this.$router.replace('/'); // 跳转到登录页面
              } else {
                alert(res.msg);
                this.register_disabled = false;
                
                
              }
            });
          } else {
            this.register_disabled = false;
            console.log('VERIFICATION FAILED');
            return false;
          }
        });
      }
    }
  };
</script>
  
<style scoped>
  .registerBody {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/login_bg.jpg'); /* 添加背景图 */
    background-color: #B3C0D1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .registerDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -270px;
    margin-left: -250px;
    width: 450px;
    height: 540px;
    background: #fff;
    border-radius: 5%;
  }
  .register-title {
    margin: 20px 0;
    text-align: center;
  }
  .register-content {
    width: 400px;
    height: 320px;
    position: absolute;
    top: 25px;
    left: 25px;
  }
  .button-container {
    display: flex;
    width: 100%;
  }
</style>
  